<!DOCTYPE HTML>
<html th:with="title='添加设备',module='/js/app/common/uploadaudio.js'">
<head th:include="fragments/header :: header">
</head>
<body id="app">
	<div class="page-container">
		<form action="/manager/device/save" method="post" class="form form-horizontal" id="device-form">
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					设备名称：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="deviceName" name="deviceName">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					设备型号：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="model" name="model">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">设备地址：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="address" name="address">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">云科号：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="yunkeNum" name="yunkeNum">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					设备mac地址：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="sn" name="sn">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">联系方式：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="mobile" name="mobile">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					设备类型：
				</label>
				<div class="formControls col-xs-2 col-sm-2">
					<span class="select-box">
						<select class="select size-L" id="showType" name="showType" v-model="data.showType" onchange="showAppTemplate();">
							<option value="0">横屏</option>
							<option value="1">竖屏</option>
							<option value="2">待设置</option>
						</select>
					</span>
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">分辨率：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="resolution" name="resolution">
				</div>
			</div>

			<div class="row cl" sec:authorize="hasRole('ROLE_DEVICE_JOINUSER')">
				<label class="form-label col-xs-4 col-sm-3">
					<span class="c-red">*</span>
					关联用户：
				</label>

				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="userName" name="userName" readonly="readonly">
					<input type="hidden" id="operator" name="operator">
				</div>
				<div class="formControls col-xs-4 col-sm-3">
					<input class="btn btn-link" type="button" onclick="showMenu();" value="选择">
				</div>
			</div>

			<!--<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">分辨率：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input type="text" class="input-text size-L" id="resolution" name="resolution" >
				</div>
			</div>-->

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">选择模板：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<select class="input-text size-L" id="appTemplate" name="appTemplate" >
						<option></option>
					</select>
				</div>
			</div>

			<!-- 		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">城市：</label>
			<div class="formControls col-xs-2 col-sm-2">
			<span class="select-box">
			<select class="select size-L" id="city" name="city" >
				<option v-bind:value="item" v-for="item in citys" >{{item}}</option>	
			</select>
			</span>
		</div>
		</div> -->
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">城市：</label>
				<div class="formControls col-xs-2 col-sm-2">
					<input class="input-text size-L" id="citySelect" name="city">
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">在设备上开启：</label>
				<div class="formControls col-xs-3 col-sm-3">
					<label>已开启设备(双击左右选择)</label>
					<span class="select-box">
						<select class="select size-S" id="userGroupIds" name="userGroupIds" multiple="multiple" size="6">
						</select>
					</span>
					<label>按住ctrl键，单击选择多项</label>
				</div>
				<div class="formControls col-xs-1 col-sm-1" style="height: 100%;">
					<label>&nbsp;</label>
					<label class="form-label">
						<input title="全部移动到右边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_rightAll" value=">>" />
					</label>
					<label class="form-label">
						<input title="选中的移动到右边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_rightSelected" value=">" />
					</label>
					<label class="form-label">
						<input title="选中的移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_leftSelected" value="<" />
					</label>
					<label class="form-label">
						<input title="全部移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_leftAll" value="<<" />
					</label>
				</div>
				<div class="formControls col-xs-3 col-sm-4">
					<label>待开启设备(双击左右选择)</label>
					<span class="select-box">
						<select class="select size-S" id="userGroupIds_to" multiple="multiple" size="6">
							<!-- <option th:each="device:${devices}" th:value="${device.id}" th:text="${device.deviceName}"></option> -->
						</select>
					</span>
					<label>按住ctrl键，单击选择多项</label>
				</div>
			</div>
			<div class="row cl">
				<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
					<input class="btn btn-primary size-L radius" type="submit" value="提交">
					<input class="btn btn-primary size-L radius" type="button" onclick="closeWin()" value="关闭">
				</div>
			</div>
		</form>
	</div>
	<div th:include="fragments/widget :: userTreePanel"></div>
	<script th:include="fragments/widget :: userTreeJs" type="text/javascript">
	</script>
	<!-- 城市选择器 -->
	<script type="text/javascript" src="/js/app/citySelect/citySelect.js"></script>
	<link rel="stylesheet" type="text/css" href="/js/app/citySelect/citySelect.css" />
	<script type="text/javascript">
	var deviceId = "";
		var app = new Vue({
			el : '#app',
			data : {
				citys : {},
			}
		});
		function closeWin() {
			var index = parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}
		function resetForm() {
			$('#group-form')[0].reset();
			$("#roleIds").val("");
			$("#userIds").find("option").appendTo($("#userIds_to"));
			$("#roleNames").html("");
		}
		/* 获取所有营销工具 */
		function loadMarket() {
			var tip = layer.load(0, {
				shade : false
			});
			$.ajax({
				type : "GET",
				url : '/manager/market/findAll',
				beforeSend : function() {
				},
				complete : function() {
					layer.close(tip);
				},
				error : function(request) {
					layer.alert("系统错误");
				},
				success : function(result) {
					if (result.status == 0) {
						var data = result.data;
						for (var i = 0; i < data.length; i++) {
							deviceId += data[i].id + ",";
						}
						for (var i = 0; i < data.length; i++) {
							$("#userGroupIds_to").append("<option value="+data[i].id+">" + data[i].name + "</option>");
						}
					} else {
						sessionCheckTimeOut(result);
					}
				}
			});
		}
 		function saveMarket(deviceId){
 			var ids = [];
 			var selectedGroups = $("#userGroupIds").find("option");
 			ids.push(deviceId);
			for (var j = 0; j < selectedGroups.length; j++) {
				ids.push($(selectedGroups[j]).prop("value"));
			}
			console.log(ids);
			$.ajax({
				type : "POST",
				url : '/manager/openMarket/saveOpenMarket',
				data : {
					ids : ids
				},
				beforeSend : function() {

				},
				complete : function() {

				},
				error : function(request) {
					layer.alert("系统出错");
				},
				success : function(data) {
					if (data.status == 0) {
						refreshUParentList();
						layer.alert(data.message, function() {
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
						});
					} else {
						layer.alert(data.message);
					}
				}
			});
		}
		$(function() {
			$('#userGroupIds').multiselect({
				submitAllLeft : false,
				submitAllRight : false
			});
			loadMarket();
			$("#device-form").validate({
				rules : {
					deviceName : {
						required : true,
					},
					model : {
						required : true,
					},
					sn : {
						required : true,
					},
					userName : {
						required : true,
					},
					showType : {
						required : true,
					}
				},
				onkeyup : false,
				focusCleanup : true,
				success : "valid",
				submitHandler : function(form) {
					var data = $('#device-form').serialize();
					if ($("#operator").val() != "") {
						data += "&user.id=" + $("#operator").val();
					}
					$.ajax({
						type : "POST",
						url : '/manager/device/saveReturn',
						data : data,
						beforeSend : function() {

						},
						complete : function() {

						},
						error : function(request) {
							layer.alert("系统出错");
						},
						success : function(data) {
							if (data.status == 0) {
								saveMarket(data.data.id);
								/* refreshUParentList();
								layer.alert(data.message, function() {
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);
								}); */
							} else {
								layer.alert(data.message);
							}
						}
					});
				}
			});
		});
		var showAppTemplate = function(){
			var showType = $("#showType").val();
			if(showType == ""){
				var obj = document.getElementById("appTemplate");
				obj.options.length = 0;
				layer.alert("请选择设备类型！");
				return false;
			}else{
				$.ajax({
					type : "GET",
					url : '/manager/appTemplate/queryTree',
					data : {
						search_EQ_showType:$("#showType").val(),
					},
					beforeSend : function() {
					},
					complete : function() {
					},
					error : function(request) {
						layer.alert("系统错误");
					},
					success : function(result) {
						var data = result.data;
						var obj = document.getElementById("appTemplate");
						obj.options.length = 0;
						var bb = $(document).find("#appTemplate");
						for ( var i = 0; i < data.length; i++) {
							bb.append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
						}
					}
				});
			}
		}
	</script>
</body>
</html>